<template>
	<div id="spreadList">
		<p class="Title">已邀请商家</p>
		<div class="spreadList_1">
			<img src="../../static/img/recharge-01.png"/>
			<div class="spreadList_1_text">
				<p>累计邀请获利</p>
				<p>{{returnFloat(spread)}}元</p>
			</div>
		</div>
		<div class="spreadList_2">
			<div class="list_title">
				<p>注册时间</p>
				<p>被邀请人ID</p>
				<p>状态</p>
				<p>累计获得奖励</p>
			</div>
			<div v-if="spreadList.length>0" v-for="item in spreadList" class="list_item">
				<p>{{getDate(item.createtime)}}</p>
				<p>{{item.id}}</p>
				<p>{{item.status == 1?'已成为赶紧试VIP':'未充值VIP'}}</p>
				<p>{{item.money}}元</p>
			</div>
			<el-pagination
				v-if="spreadList.length>0"
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
			</el-pagination>
			<!----------没有数据了------------>
			<div v-else class="noData">
				<img src="../../static/img/nodata.png"/>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'spreadList',
	data:function(){
		return{
			spread: 0,//推广获利
			total: 0,//总条数
			pageSize: 10,//每页条数
			currentPage: 1,//当前页码
			spreadList:[
				{
					createtime: 1514779200000,//注册时间
					id: 142387,//被邀请人ID
					status: 1,//状态
					money: 198,//累计获得奖励
				}
			]
		}
	},
	methods:{
		getList: function(val){
			var _this = this;
			let postData = this.$qs.stringify({
	        	startPage: val,
	        	pageSize: this.pageSize
	        })
			_this.$axios.post('/agent/extends/show', postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	_this.spreadList = data.result.list;
		    		_this.total = data.result.total;
			    }else{
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		handleCurrentChange:function(val) {
	    	var _this = this;
	        console.log(`当前页: ${val}`);
	        this.getList(val);
	    },
		//--------小数点后两位不够补零---------------
		returnFloat:function(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
	},
	created: function(){
		this.getList(1);
	}
}
</script>

<style scoped>
#spreadList{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.spreadList_1{
	padding: 20px 30px;
	border-top: 1px solid #E6E6E6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.spreadList_1 img{
	height: 50px;
	display: block;
	margin-right: 10px;
}
.spreadList_1 .spreadList_1_text{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 44px;
}
.spreadList_1 .spreadList_1_text p:first-child{
	color: #545454;
}
.spreadList_1 .spreadList_1_text p:last-child{
	color: #FF464E;
}
.list_title{
	display: flex;
	background-color: #F5F5F5;
	align-items: center;
	height: 35px;
}
.list_title p{
	text-align: center;
	color: #545454;
	width: 25%;
}
.list_item{
	display: flex;
	height: 40px;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
}
.list_item p{
	text-align: center;
	color: #808080;
	width: 25%;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
</style>